<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>好友寄卖</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <style>
    	.wrap {
				padding: 0px 15px;
				position:relative;
			}
			
			.wrap a {
				margin-top: 30px;
				padding-left: 30px;
				background: #E5E5E5;
				border-radius: 10px;
				display: block;
				width: 100%;
				height: 50px;
				line-height: 50px;
				color: #222222;
			}
			
			.wrap a:after {
				content: '';
				background: #DDDDE0;
				height: 1px;
				width: 100%;
				position: absolute;
				left: 0;
				bottom: -30px;
			}
			
			.wrap a>img {
				margin-right: 30px;
				vertical-align: middle;
			}
			.wrap .mui-media-body{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.mui-table-view:before,
			.mui-table-view:after{
				background: none;
			}
			.wrap ul{
				background: none;
			}
			.wrap ul li{
				margin-top: 10px;
				background: #fff;
				border-radius: 10px;
			}
			.wrap ul li>div{
			    position: relative;
			    display: block;
			    overflow: hidden;
				margin: 0 -15px;
			    padding: inherit;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    color: inherit;
			}
			.wrap ul li>div span{
				color: #e53e30;
			}
			.wrap .mui-btn-blue{
				background: #65d4a3;
				border: none;	
			    color: #fff;
			}
			.wrap .mui-btn:enabled:active{
				border: none;
				background: #65d4a3;
			}
			.wrap ul li img{
				margin-top: 20px;
			}
			.wrap button{
				margin-top: 10px;
			}
    </style>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav">
		<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">钛交易</h1>
	</header>
	
	<!--寄卖按钮-->
	<div class="mui-content wrap">
		<a href="Money_transfer.html"><img src="img/add.png" alt="" />寄卖交易</a>
		
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media">
				<div>
					<img class="mui-media-object mui-pull-left" src="img/bank.png">
					<div class="mui-media-body">
						<div>
							单号：1548196747<br/> 数量：
							<span>100.00</span><br/> 用户名：12345678910
							<br/> 手机号：12345678910
						</div>
						<div>
							<button class="mui-btn mui-btn-blue" data-data='1'>确认</button><br/>
							<button class="mui-btn mui-btn-danger" data-data='1'>删除</button>
						</div>
					</div>
				</div>
			</li>
			<li class="mui-table-view-cell mui-media">
				<div>
					<img class="mui-media-object mui-pull-left" src="img/bank.png">
					<div class="mui-media-body">
						<div>
							单号：1548196747<br/> 数量：
							<span>100.00</span><br/> 用户名：12345678910
							<br/> 手机号：12345678910
						</div>
						<div>
							<button class="mui-btn mui-btn-blue" data-data='2'>确认</button><br/>
							<button class="mui-btn mui-btn-danger" data-data='2'>删除</button>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
    
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init()
    	
	    $('.wrap .mui-btn-blue').click(e=>{
	    	let _this = $(e.target)
	    	mui.confirm('您确定已收款？','收款提示',['取消','确认'],el=>{
	    		if(el.index){
	    			//确定的话执行业务代码
	    			
//	    			console.log(_this.data('data')) //获取当前按钮的data-的数据
//	    			console.log(_this) // 获取当前按钮对象
	    			$.ajax({
	    				type:"get",
	    				url:``,
	    				async:true,
	    				success(data){
	    					data = true					//假设交易成功
	    					if(data){
	    						_this.parents('.mui-table-view-cell').remove()
	    						mui.toast('交易成功')
	    					}else{
	    						mui.toast('交易失败，请刷新重试')
	    					}
	    				},
	    				error(err){
	    					mui.toast('交易失败，请刷新重试')
	    				}
	    			})
	    		}
	    	},'div')
	    })
	    
	    $('.wrap .mui-btn-danger').click(e=>{
	    	let _this = $(e.target)
	    	mui.confirm('您确定刪除吗？','删除提示',['取消','确认'],el=>{
	    		if(el.index){
	    			//确定的话执行业务代码
	    			
//	    			console.log(_this.data('data')) //获取当前按钮的data-的数据
//	    			console.log(_this) // 获取当前按钮对象
	    			$.ajax({
	    				type:"get",
	    				url:``,
	    				async:true,
	    				success(data){
	    					data = true					//假设交易成功
	    					if(data){
	    						_this.parents('.mui-table-view-cell').remove()
	    						mui.toast('交易成功')
	    					}else{
	    						mui.toast('交易失败，请刷新重试')
	    					}
	    				},
	    				error(err){
	    					mui.toast('交易失败，请刷新重试')
	    				}
	    			})
	    		}
	    	},'div')
	    })
    </script>
</body>
</html>
